import 'package:flutter/material.dart';
import 'package:wx_faxian/const.dart';

class IndexBar extends StatefulWidget {
  void Function(String letter) indexBarCallBack; // 索引栏回调
  IndexBar({required this.indexBarCallBack, super.key});

  @override
  State<IndexBar> createState() => _IndexBarState();
}

class _IndexBarState extends State<IndexBar> {
  Color _bgColor = Colors.transparent;
  Color _textColor = Colors.black;
  double _indicatorY = 0; // 指示器位置
  String _indicatorText = 'A'; // 指示器文字
  bool _indicatorHidden = true; // 指示器是否隐藏

  // 获取当前事件的字符
  int getIndexLetter(BuildContext content, globalPosition) {
    // 获取当前事件的节点
    RenderBox box = context.findRenderObject() as RenderBox;
    // 获取当前事件在子节点的坐标
    double y = box.globalToLocal(globalPosition).dy;
    // 计算字符高度
    double itemHeight = getScreenHeight(context) / 2 / INDEX_LETTER.length;
    // 计算当前字符索引 clamp约束范围
    int index = (y ~/ itemHeight).clamp(0, INDEX_LETTER.length - 1);
    // 获取当前字符
    // String letter = INDEX_LETTER[index];
    return index;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: getScreenHeight(context) / 8,
      right: 0,
      width: 120,
      height: getScreenHeight(context) / 2,
      child: Row(
        children: [
          Container(
            alignment: Alignment(0, _indicatorY),
            width: 100,
            child: _indicatorHidden != true
                ? Stack(
                    alignment: Alignment(-0.2, 0),
                    children: [
                      Image.asset('images/qp.png', width: 60, height: 60),
                      Text(_indicatorText,
                          style: const TextStyle(
                              fontSize: 25, color: Colors.blue)),
                    ],
                  )
                : null,
          ),
          GestureDetector(
            onVerticalDragUpdate: (details) {
              int index = getIndexLetter(context, details.globalPosition);
              String letter = INDEX_LETTER[index];

              setState(() {
                _indicatorY = 2.2 / INDEX_LETTER.length * index - 1.1;
                _indicatorText = letter;
                _indicatorHidden = false;
              });

              widget.indexBarCallBack(letter);

            },
            onVerticalDragDown: (DragDownDetails details) {
              int index = getIndexLetter(context, details.globalPosition);
              String letter = INDEX_LETTER[index];

              setState(() {
                _bgColor = Colors.black26;
                _textColor = Colors.white;

                _indicatorY = 2.2 / INDEX_LETTER.length * index - 1.1;
                _indicatorText = letter;
                _indicatorHidden = false;
              });

              widget.indexBarCallBack(letter);

            },
            onVerticalDragEnd: (DragEndDetails details) {
              setState(() {
                _bgColor = Colors.transparent;
                _textColor = Colors.black;
                _indicatorHidden = true;
              });
            },
            child: Container(
              color: _bgColor,
              child: Column(
                children: INDEX_LETTER
                    .map(
                      (e) => Expanded(
                        child: Container(
                          width: 20,
                          height: 20,
                          alignment: Alignment.center,
                          child: Text(e, style: TextStyle(color: _textColor)),
                        ),
                      ),
                    )
                    .toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
